<template>
  <div id="box">
    <div id="box1" v-show="!visible">
      <el-container>
        <el-header>
          <span>部门列表</span>
          <p class="right return" id="" @click="backed">首页>部门列表</p>
        </el-header>
        <div class="headerbox">
          <el-button type="primary" @click="del">删除选择</el-button>
          <el-button type="success"  @click="refresh">刷新</el-button>
          <div class="dpmBox">
            <el-input
              placeholder="请输入部门名称"
              v-model="input"
              clearable
            ></el-input>
          </div>
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
          <!-- <el-button type="info" class="right">导出</el-button> -->
          <el-button type="success" class="right" @click="add"
            >新增部门
          </el-button>
        </div>
        <!--表格内容-->
        <el-main>
          <div>
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" style="width: 5%">
              </el-table-column>
              <el-table-column
                prop="departmentName"
                label="部门名称"
                style="width: 15%"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="部门负责人"
                style="width: 10%"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="负责人联系方式"
                style="width: 20%"
              >
              </el-table-column>
              <el-table-column
                prop="email"
                label="负责人邮箱"
                style="width: 10%"
              >
              </el-table-column>
              <el-table-column prop="total" label="部门人数" style="width: 10%">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                style="width: 30%"
              >
              </el-table-column>
              <el-table-column
                prop="option"
                label="操作"
                width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
      <!--分页-->
      <!--page-size:每页显示条目个数pager-count：页码按钮的数量，当总页数超过该值时会折叠total	总条目数-->
      <!-- <el-pagination
              :page-size="10"
              :pager-count="5"
              layout="prev, pager, next"
              :total="100"
            >
            </el-pagination> -->
      <el-pagination
        :page-size="10"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="pagenum"
      >
      </el-pagination>
    </div>

    <div id="box2" v-show="visible">
      <template>
        <div>
          <el-container>
            <el-header>
              <span>编辑</span>
              <a class="right" href="javascript:;" @click="back">< 返回</a>
            </el-header>
            <div id="content">
              <p class="jiben">基本详情</p>
              <ul class="left">
                <li>
                  <p>部门名称</p>
                  <el-input v-model="name2" placeholder="部门名称"></el-input>
                </li>
                <li>
                  <p>部门编号</p>
                  <el-input v-model="number" placeholder="部门编号"></el-input>
                </li>

                <li>
                  <p>部门负责人</p>
                  <el-input
                    v-model="departmentHead"
                    placeholder="部门负责人"
                  ></el-input>
                </li>
              </ul>
              <ul class="right">
                <li>
                  <p>负责人联系方式</p>
                  <el-input
                    v-model="telephone"
                    placeholder="负责人联系方式"
                    
                  ></el-input>
                </li>
                <li>
                  <p>负责人邮箱</p>
                  <el-input v-model="email2" placeholder="邮箱" ></el-input>
                </li>
                <li>
                  <p>部门介绍</p>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
                  >
                  </el-input>
                </li>
                <li>
                  <p>创建日期</p>
                  <el-date-picker
                    v-model="entryTime"
                    type="datetime"
                    placeholder="年/月/日"
                  >
                  </el-date-picker>
                </li>
              </ul>
            </div>
          </el-container>
          <div id="footBox">
            <div id="footer">
              <el-button type="info" @click="cancle">取消</el-button>
              <el-button type="success" @click="preservation" :plain="true">保存</el-button>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>


<script>
    export default {
        name: "TeacherList",
        data() {
            return {
                input:"",//搜索
                delid: "",//删除数据的所有id
                pagenum: 0,
                currentPage: 1, //默认页数是第一页
                departement: "",
                tableData: [], //表格数据
                departmentName: "", //部门名
                name: "", //负责人
                phone: "", //联系方式
                email: "", //邮箱
                total: "", //人数
                createTime: "", //创建时间
                introduce: "", //部门介绍
                // multipleSelection: [],
                visible: false, //弹框是否显示
                multipleSelection: [],//多选框选中的那条数据

                //编辑
                entryTime: '',
                textarea: '',
                email2: '',
                telephone: '',
                departmentHead: '',
                number: '',
                name2: ''
            };
        },
        methods: {
                      //返回首页
            backed(){
                    this.$router.push({path: '/index'})
            },
            //取消
            cancle() {
                this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '保存',
                    cancelButtonText: '放弃修改'
                })
                    .then(() => {
                        this.preservation();
                    })
                    .catch(action => {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '放弃保存并离开页面'
                                : '停留在当前页面'
                        });
                        this.visible = !this.visible
                    });
            },
          //刷新
            refresh() {
                location.reload();
            },

            //手机号验证
            phoneyz() {
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(this.phone)) {
                    this.$message.error('手机格式不正确，请重新输入！');
                    return false;
                } else {
                    return true;
                }
            },

            //邮箱验证
            emailyz() {
                //邮箱正则
                var emreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!emreg.test(this.email)) {
                    this.$message.error('邮箱格式不正确，请重新输入！');
                    return false;
                } else {
                    return true;
                }
            },
            //分页切换
            handleCurrentChange(val) {
                // this.multipleSelection = val;
                this.currentPage = currentPage;
                this.xr();
            },
            //分页切换
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //编辑方法
            handleEdit(index, row) {
                console.log(row.id);
                var id = row.id;
                sessionStorage.departementId = id;
                this.$axios({
                    url: '/department/findDepartmentById',
                    params: {
                        id: id
                    }
                }).then((res) => {
                    var data = res.data.data;
                    this.entryTime = data.createTime;
                    this.textarea = data.introduce;
                    this.email2 = data.email;
                    this.telephone = data.phone;
                    this.departmentHead = data.name;
                    this.number = data.total;
                    this.name2 = data.departmentName;
                    this.visible = !this.visible;
                });
            },
            //保存
            preservation(){
              var id = parseInt(sessionStorage.departementId);
              if(this.entryTime==''||this.textarea==''||this.email2==''||this.telephone==''||this.departmentHead==''||this.number==''||this.name2==''){
                this.$message.error('请填写完整信息');
              }else{
                this.$axios({
                  url:'/department/updateDepartment',
                  method:'post',
                  data:{
                      id:id,
                      createTime:this.entryTime,
                      departmentName :this.name2,
                      email:this.email2,
                      introduce:this.textarea,
                      name:this.departmentHead,
                      phone:this.telephone,
                      total:this.number
                  }
                }).then((res) => {
                      if (res.data.code == 0) {
                          this.$message({
                            message: '修改成功',
                            type: 'success'
                              });
                            location.reload();
                          }
                      })
              }
            },
            //删除
            del(){
              this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                  var data = this.multipleSelection;
                  for (var i = 0; i < data.length; i++) {
                        this.delid += data[i].id + ',';
                    }
                    this.delid = this.delid.substring(0, this.delid.length - 1);
                    console.log(this.delid)
                    this.$axios({
                        url: '/department/deleteDepartmentId',
                        method: 'post',
                        params:{
                          'ids':this.delid
                        }
                    }).then((res) => {
                        if (res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            /* alert('删除成功');*/
                            location.reload();
                            this.xr();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            add() {
                //添加部门
                this.$router.push("/addDepartment");
            },
            back() {
                //编辑界面中的返回按钮
                this.visible = !this.visible;

            },
            //渲染页面
            xr() {
                this.$axios({
                    url: "/department/list",
                    params: {
                        page: this.currentPage,
                        limit: 10,
                    },
                }).then((res) => {
                if(res.data.code==0){
                  var data = res.data.data.list;
                    // console.log(data);
                    // this.sexToText(data);
                    for (var i = 0; i < data.length; i++) {
                        data[i].createTime = this.format(data[i].createTime);
                    }
                    this.tableData = res.data.data.list;
                    this.pagenum = res.data.data.total;
                }else{
                  this.$router.push("/noResponse");
                  if(res.daata.code==0){
                     this.$router.push("/departmentList");
                  }
                }
                    
                });
            },
            //补零规则
            add0(m) {
                return m < 10 ? "0" + m : m;
            },

            //将时间戳转换为日期格式
            format(shijianchuo) {
                //时间戳是整数，否则要parseInt转换
                var time = new Date(shijianchuo);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return y + "-" + this.add0(m) + "-" + this.add0(d) + " ";
            },

            //搜索
            query(){
              this.$axios({
                  url:'/department/selectDepartment',
                  params:{
                    name:this.input
                  }
              }).then((res)=>{
                  this.tableData=res.data.data   

              })
            }
        },
        mounted() {
            this.xr();
        },
    };
</script>

<style scoped lang="less">
@fontcolor: #333;
@contentbgcolor: white;
* {
  padding: 0;
  margin: 0;
}
.return {
                color: #333;
                float: right;
                font-size: 18px;
                cursor: pointer;
            }

            .return:hover {
                color: #8cc5ff;
            }
#box1 {
  a {
    text-decoration: none;
    color: #333333;
  }

  li {
    list-style: none;
  }

  #box {
    background: #d3dce6;
  }

  #el-popover-1715 {
    width: 500px;
  }
  .right {
    float: right;
    margin-right: 10px;
  }

  .headerbox {
    margin-top: 20px;

    button,
    div {
      float: left;
      margin-left: 10px;
    }

    .dropdownBox {
      margin-top: 10px;
    }

    .right {
      float: right;
    }
    
  }

  .el-header {
    background-color: white;
    color: @fontcolor;
    line-height: 60px;
    font-size: 20px;
  }

  .el-header {
    margin-top: 10px;
    text-align: left;
  }

  .el-main {
    margin-top: 10px;
    background-color: @contentbgcolor;
    color: @fontcolor;
    text-align: center;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .el-pagination {
    float: right;
  }
}

#box2 {
  @contentbgcolor: white;
  @margin: 10px;

  ul {
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #333333;
  }

  li {
    list-style: none;
    margin-top: 15px;

    p {
      margin: 0;
    }
  }

  #box {
    background: #f2f2f6;
  }

  .el-container {
    margin: 0;
    padding: 0;
  }

  .el-header {
    margin-top: 20px;
    background-color: @contentbgcolor;
    color: #333;
    text-align: left;
    line-height: 60px;
    font-size: 20px;

    .right {
      float: right;
      margin-right: 10px;
    }

  }
              
  #content {
    background: @contentbgcolor;
    margin-top: 10px;

    .jiben {
      margin-left: 10px;
    }

    .left {
      float: left;
      margin-left: @margin;

      .img {
        width: 150px;
        height: 150px;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .el-upload {
        .el-button {
          margin-left: 35px;
          margin-top: 5px;
        }
      }
    }

    .right {
      float: right;
      margin-right: @margin;
    }

    .el-input,
    .el-select {
      width: 500px;
      height: 50px;
    }
  }

  #footBox {
    width: 100%;
    height: 350px;
    background: white;
  }

  #footer {
    margin-left: 43%;
    height: 200px;

    .el-button {
      float: left;
      margin-top: 100px;
    }
  }
}
</style>